import React from 'react';
import { Link } from 'react-router-dom';
import { ArrowRight, BookOpen } from 'lucide-react';
export function Guides() {
  const guides = [{
    id: 'hiking-boots',
    title: 'How to Choose Your First Hiking Boots',
    excerpt: 'Finding the perfect pair of hiking boots can mean the difference between an enjoyable trek and a painful ordeal. This comprehensive guide walks you through everything you need to consider.',
    image: 'https://images.unsplash.com/photo-1542124292-60272943bc2e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
    category: 'Gear Selection',
    readTime: '12 min read'
  }, {
    id: 'layering',
    title: 'The Art of Layering for Outdoor Adventures',
    excerpt: 'Master the science of staying comfortable in any weather condition with our comprehensive guide to layering systems for different activities and climates.',
    image: 'https://images.unsplash.com/photo-1521038199265-bc482db0f923?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
    category: 'Skills & Techniques',
    readTime: '15 min read'
  }, {
    id: 'ultralight-packing',
    title: 'Ultralight Backpacking: A Complete Guide',
    excerpt: 'Learn how to reduce pack weight without sacrificing comfort or safety. This guide covers gear selection, packing techniques, and weight-saving strategies for long-distance hikers.',
    image: 'https://images.unsplash.com/photo-1602156498253-ad0c84c1d008?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
    category: 'Skills & Techniques',
    readTime: '18 min read'
  }, {
    id: 'family-camping',
    title: 'Family Camping Tent Selection Guide',
    excerpt: 'Find the perfect shelter for your family adventures with our comprehensive guide to selecting, setting up, and maintaining family-sized camping tents.',
    image: 'https://images.unsplash.com/photo-1504851149312-7a075b496cc7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
    category: 'Gear Selection',
    readTime: '14 min read'
  }, {
    id: 'alpine-routes',
    title: 'Classic Alpine Routes for Intermediate Climbers',
    excerpt: 'Discover some of the most rewarding alpine climbing routes suitable for intermediate climbers, complete with gear recommendations and preparation tips.',
    image: 'https://images.unsplash.com/photo-1522163182402-834f871fd851?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
    category: 'Destinations',
    readTime: '20 min read'
  }, {
    id: 'bike-maintenance',
    title: 'Essential Mountain Bike Maintenance',
    excerpt: 'Keep your mountain bike performing at its best with our comprehensive maintenance guide covering everything from daily checks to seasonal overhauls.',
    image: 'https://images.unsplash.com/photo-1541625602330-2277a4c46182?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
    category: 'Maintenance',
    readTime: '16 min read'
  }];
  const categories = [{
    id: 'all',
    name: 'All Guides'
  }, {
    id: 'gear-selection',
    name: 'Gear Selection'
  }, {
    id: 'skills',
    name: 'Skills & Techniques'
  }, {
    id: 'destinations',
    name: 'Destinations'
  }, {
    id: 'maintenance',
    name: 'Maintenance'
  }];
  return <div className="w-full bg-earth-dark">
      {/* Hero Section */}
      <section className="relative py-20 bg-carbon-black">
        <div className="absolute inset-0 z-0">
          <img src="https://images.unsplash.com/photo-1501785888041-af3ef285b470?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2000&q=80" alt="Mountain landscape with guidebook" className="w-full h-full object-cover opacity-40" />
        </div>
        <div className="container mx-auto px-4 relative z-10">
          <div className="max-w-3xl">
            <h1 className="font-display text-4xl md:text-6xl mb-4">
              EXPEDITION KNOWLEDGE BASE
            </h1>
            <p className="text-xl text-gray-300 mb-8">
              Comprehensive guides, expert advice, and proven techniques to
              elevate your outdoor adventures.
            </p>
            <div className="flex flex-wrap gap-3">
              {categories.map(category => <a key={category.id} href={`#${category.id}`} className="bg-earth-dark hover:bg-outdoor-orange text-white px-4 py-2 rounded-full transition-colors">
                  {category.name}
                </a>)}
            </div>
          </div>
        </div>
      </section>
      {/* Featured Guide */}
      <section className="py-16">
        <div className="container mx-auto px-4">
          <h2 className="font-display text-3xl md:text-4xl mb-8">
            FEATURED GUIDE
          </h2>
          <div className="bg-carbon-black rounded-lg overflow-hidden">
            <div className="grid grid-cols-1 lg:grid-cols-5">
              {/* Featured Guide Image */}
              <div className="lg:col-span-2">
                <img src="https://images.unsplash.com/photo-1551632436-cbf8dd35adfa?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Essential Wilderness Navigation" className="w-full h-full object-cover" />
              </div>
              {/* Featured Guide Content */}
              <div className="p-8 lg:col-span-3">
                <div className="flex items-center mb-4">
                  <span className="bg-outdoor-orange text-white px-3 py-1 text-sm font-display mr-3">
                    FEATURED
                  </span>
                  <span className="text-gray-400">20 min read</span>
                </div>
                <h3 className="font-display text-3xl mb-4">
                  ESSENTIAL WILDERNESS NAVIGATION: BEYOND THE GPS
                </h3>
                <p className="text-gray-300 mb-6 leading-relaxed">
                  In today's technology-dependent world, traditional navigation
                  skills are becoming a lost art. Yet when batteries die or
                  signals fail, these fundamental techniques become crucial
                  survival tools. This comprehensive guide covers map reading,
                  compass navigation, natural indicators, and how to effectively
                  combine traditional methods with modern technology.
                </p>
                <div className="mb-6">
                  <h4 className="font-display text-xl mb-3">YOU'LL LEARN:</h4>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                    <div className="flex items-center">
                      <div className="w-2 h-2 bg-outdoor-orange rounded-full mr-2"></div>
                      <span>Topographic map interpretation</span>
                    </div>
                    <div className="flex items-center">
                      <div className="w-2 h-2 bg-outdoor-orange rounded-full mr-2"></div>
                      <span>Compass bearing techniques</span>
                    </div>
                    <div className="flex items-center">
                      <div className="w-2 h-2 bg-outdoor-orange rounded-full mr-2"></div>
                      <span>Natural navigation methods</span>
                    </div>
                    <div className="flex items-center">
                      <div className="w-2 h-2 bg-outdoor-orange rounded-full mr-2"></div>
                      <span>Emergency location strategies</span>
                    </div>
                  </div>
                </div>
                <Link to="/guides/wilderness-navigation" className="inline-flex items-center bg-outdoor-orange hover:bg-climbing-red text-white font-display px-6 py-3 rounded transition-colors">
                  READ FULL GUIDE
                  <ArrowRight size={16} className="ml-2" />
                </Link>
              </div>
            </div>
          </div>
        </div>
      </section>
      {/* All Guides */}
      <section className="py-16">
        <div className="container mx-auto px-4">
          <div className="flex flex-col md:flex-row justify-between items-center mb-8">
            <h2 className="font-display text-3xl md:text-4xl mb-4 md:mb-0">
              ALL GUIDES
            </h2>
            <div className="relative">
              <input type="text" placeholder="Search guides..." className="bg-carbon-black border border-gray-700 rounded-full px-5 py-2 pl-10 focus:outline-none focus:border-outdoor-orange transition-colors w-full md:w-64" />
              <BookOpen size={18} className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
            </div>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {guides.map(guide => <Link key={guide.id} to={`/guides/${guide.id}`} className="group">
                <div className="bg-carbon-black rounded-lg overflow-hidden h-full flex flex-col">
                  <div className="relative h-48 overflow-hidden">
                    <img src={guide.image} alt={guide.title} className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" />
                    <div className="absolute top-0 left-0 bg-outdoor-orange px-3 py-1">
                      <span className="font-display text-sm">
                        {guide.category}
                      </span>
                    </div>
                  </div>
                  <div className="p-6 flex-grow flex flex-col">
                    <div className="mb-2 text-sm text-gray-400">
                      {guide.readTime}
                    </div>
                    <h3 className="font-display text-xl mb-3 group-hover:text-outdoor-orange transition-colors">
                      {guide.title}
                    </h3>
                    <p className="text-gray-300 mb-4 flex-grow">
                      {guide.excerpt}
                    </p>
                    <div className="flex items-center text-outdoor-orange mt-auto">
                      <span className="mr-2">Read Guide</span>
                      <ArrowRight size={16} className="transition-transform group-hover:translate-x-1" />
                    </div>
                  </div>
                </div>
              </Link>)}
          </div>
          <div className="mt-12 text-center">
            <button className="bg-outdoor-orange hover:bg-climbing-red text-white font-display px-8 py-3 rounded transition-colors">
              LOAD MORE GUIDES
            </button>
          </div>
        </div>
      </section>
    </div>;
}